<template>
    <h1>一个人的信息</h1>
    姓：<input type="text" v-model="person.firstName">
    <br>
    <br>
    名：<input type="text" v-model="person.lastName">
    <br>
    <br>
    <span>全名：{{ person.fullName }}</span>
    <br>
    全名：<input type="text" v-model="person.fullName">
  </template>
  
  <script>
  import {reactive, computed} from 'vue'
  export default {
    name: 'Demo',
    /* computed: {
        fullName(){
            return this.person.firstName + '-' + this.person.lastName
        }
    }, */

    //数据
    setup(){
      //数据
      let person = reactive({
        firstName: '张',
        lastName: '三',
      })

      //计算属性——简写（没有考虑计算属性被修改的情况）
      /* person.fullName = computed(() => {
        return person.firstName + '-' + person.lastName
      }) */

      //计算属性——完整写法（考虑读和写）
      person.fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const newArr = value.split('-')
            person.firstName = newArr[0]
            person.lastName = newArr[1]
        }
      })

      //返回一个对象（常用）
      return {
        person,
      }
    }
  }
  </script>
  
  